<template>
<div class="article-main">
    <h1>文章列表页</h1>
    <!-- 文章列表标题 -->
    <el-card class="box-card header">
        <div slot="header" class="clearfix">
            <!-- <span>卡片名称</span> -->
            <!-- form表单 -->
            <el-form ref="search" :model="search" label-width="80px">

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="文章标题">
                            <el-input v-model="search.title"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="文章作者">
                            <el-input v-model="search.author"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="text-align:center;">
                        <el-button type="danger" @click="doSearch">搜索</el-button>

                        <el-button type="primary" @click="doResetSearch">重置</el-button>
                    </el-col>
                </el-row>

            </el-form>
        </div>
    </el-card>

    <!-- 内容区 -->
    <el-card class="box-card content" shadow="hover">
        <div slot="header" class="clearfix">
            <el-button type="primary" @click="goAddArticle">新增</el-button>
            <!-- 右边的删除 -->
             <el-tooltip class="item"  style="float: right;" effect="dark" content="删除选中的列表" placement="top-start">
                    <el-button style="float: right;" type="danger" icon="el-icon-delete" circle @click="delAll"></el-button>
            </el-tooltip>
        </div>
        <el-table v-loading="loading" element-loading-text="别着急哈……☹" :data="articleList" border style="width: 100%" height="550" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column fixed label="#" type="index" width="50" />
            <el-table-column fixed prop="title" label="文章标题" width="200" />
            <el-table-column prop="author" label="作者" width="100" />
            <el-table-column label="封面图片" width="140">
                <template slot-scope="scope">
                    <img class="cover-img" :src="scope.row.coverImg" alt="sorry">
                </template>

            </el-table-column>
            <el-table-column prop="summary" label="概要信息" width="320" />
            <el-table-column label="是否显示" width="90">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.isShow" @change="goChangeisShow(scope.row.isShow,scope.row.id)">
                    </el-switch>
                </template>

            </el-table-column>
            <el-table-column prop="editorType" label="编辑类型" width="120" />
            <el-table-column prop="createTime" label="创建时间" width="200" sortable />
            <el-table-column fixed="right" label="操作" width="220" class="btns">
                <!-- 自定义列 利用了vue的作用域插槽
                scope: 指当前table的数据对象
                scope.row: 指的是当前行数据
            -->
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleClick(scope.row)">查看</el-button>
                    <el-button type="primary" icon="el-icon-edit" circle @click="goEditArticle(scope.row.id)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle @click="goDelArticle(scope.row.id)"></el-button>
                    <!-- <el-button type="info" size="small" >编辑</el-button> -->
                    <!-- <el-button type="danger" size="small"  >删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.start" :page-sizes="page.sizes" :page-size="page.limit" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount">
        </el-pagination>
        <!-- 弹窗查看内容 -->
        <el-dialog title='' :visible.sync="dialogVisible" width="50%" :before-close="dialogBeforeClose">
            <div slot="title" class="title">{{mask.title}}
                <hr>
            </div>
            <div class="mask-content">
                <el-row :gutter="10">
                    <el-col :span="24">
                        <strong>文章标题: </strong>{{mask.title}}
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="24">
                        <strong>文章作者: </strong>{{mask.author}}
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="24">
                        <strong>文章简介: </strong>{{mask.summary}}
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="24">
                        <img :src="mask.coverImg" alt="sorry">
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :span="12">
                        <strong>创建时间: </strong>{{mask.createTime}}
                    </el-col>
                    <el-col :span="12">
                        <strong> 修改时间: </strong>{{mask.modifyTime}}
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :span="12">
                        <strong>观看数量: </strong>{{mask.viewCount}}
                    </el-col>
                    <el-col :span="12">
                        <strong>点赞数量: </strong>{{mask.zanCount}}
                    </el-col>
                </el-row>
            </div>
            <div slot="footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </el-card>

</div>
</template>

<script>
import axios from 'axios'
import {
    getToken
} from '@/utils/myAuth'

import {
    findArticles,
    del,
    changeShowStatus
} from '@/api/content/article'
export default {
    name: 'ContentArticle', // 组件名称,建议必须写. 可以通过vue-devtool 方便的调试当前组件

    components: {},
    data() {
        return {
            // 表单内容
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            // 分页器内容
            page: {
                limit: 10, //每一页数量
                sizes: [10, 20, 30, 40],
                totalCount: 40, //总页数
                start: 1 //当前页码
            },
            // 文章列表内容
            articleList: [],
            // 添加文章是否显示
            dialogVisible: false,
            // 弹窗内容
            mask: {

            },
            search: {},
            loading: false,
            delList: [],

            // 更换switch传递的参数
            statusJson:{
                
            }

        };
    },
    computed: {},
    created() {
        // 获取文章列表内容
        this.getArticleList()
    },
    mounted() {},
    methods: {
        // 重置搜索事件
        doResetSearch() {},
        // 搜索事件
        doSearch() {
            console.log(this.search);

            this.getArticleList()

        },
        // 表格点击事件
        handleClick(row) {
            console.log(row);
            this.mask = row;
            this.dialogVisible = true
        },
        // 分页器
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.page.limit = val
            this.getArticleList()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            // 修改当前页
            this.page.start = val
            this.getArticleList()
        },
        //   请求文章列表
        async getArticleList() {
            // 查询的参数--要过滤非空的条件
            var params = {}
            for (var key in this.search) {

                // 对象中的key值是 this
                
                if (this.search[key]) {
                    params[key] = this.search[key]
                }
            }
            console.log(params);
            this.loading = true

            var res = await findArticles(this.page.start, this.page.limit, params)
            console.log(res);

            if (res.success) {
                this.articleList = res.data.rows
                // 设置分页
                this.page.totalCount = res.data.total

                this.articleList.forEach(el => {
                    if (el.editorType === 0) {
                        el.editorType = '富文本'
                    } else {
                        el.editorType = 'Markdown'

                    }
                    // 是否显示
                    if (el.isShow === 1) {
                        el.isShow = true
                    } else {
                        el.isShow = false
                    }

                })
            }
            // 关闭加载
            this.loading = false

            console.log(this.articleList)

            // var articleListUrl = `/lejuAdmin/productArticle/findArticles/${this.page.start}/${this.page.limit}`
            // axios.get(articleListUrl, {
            //         // 请求数据必须先登陆,并且携带token
            //         headers: {
            //             token: getToken()
            //         }
            //     })
            //     .then(res => {
            //         this.articleList = res.data.data.rows
            //         //   设置分页
            //         this.page.totalCount = res.data.data.total
            //         console.log(res.data)
            //     })
        },
        // 添加文章弹窗
        goAddArticle() {
            this.$router.push({
                name: 'contentArticleAdd'
            })
        },
        // 编辑文章
        goEditArticle(id) {
            console.log(id);
            this.$router.push({
                name: 'contentArticleEdit',
                params: {
                    id: id
                }
            })
        },
        // 删除文章
        goDelArticle(id) {
           

            this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                del(id).then(res => {
                    console.log(res)
                    if (res.success) {
                        this.getArticleList()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },

        // 更换switch开关
        goChangeisShow(val, id) {
            // console.log(val,id);
            var isShow = val == true ? 1 : 0
            this.statusJson.isShow=isShow
            this.statusJson.id=id

            console.log(this.statusJson);
            changeShowStatus(this.statusJson).then(res=>{
                console.log(res);
                if(res.success){
                    this.$message.success('更改状态成功了！')
                }
            })

        },

        dialogBeforeClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },

        handleSelectionChange(val) {
            console.log(val);
            this.delList = val
        },
        delAll() {

           if(this.delList.length===0){
               this.$message.error('请选择要删除的文章！')
           }else{
                this.$confirm('确定删除所选文章吗, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.delList.forEach(el => {
                    del(el.id).then(res => {
                        console.log(res);
                        if (res.success) {
                            this.getArticleList()
                            this.$message.success('已成功删除所选文章')
                        }
                    })
                })
             

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
           }

           
        }
    },
};
</script>

<style lang="scss" scoped>
.article-main {

    background-color: #26A65B;

    // background-color: rgb(238, 227, 229);

}

// 头部搜索
.header {
    margin: 30px;
}

// 内容区
.content {
    margin: 30px;

    // 分页器样式
    .pagination {
        margin-top: 30px;
    }

    // 分页图片内容
    .cover-img {
        width: 120px;
        height: 100px;
    }

}

// 弹窗内容
.el-dialog {
    background-color: #26A65B;
}

.mask-content {

    .el-row {
        margin-bottom: 20px;

        .el-col {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }

    img {
        width: 120px;
        height: 120px;
        border-radius: 10px;
    }
}

// 弹窗标题
.el-dialog__header {
    height: 50px;

    .title {
        width: 100%;
        color: #26A65B;
        height: 50px;
        font-weight: bolder;

    }
}
</style>
